<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      const name = 'zhangsan';
      const age = 10;
      const h1 = tag`myName is ${name},myAge is ${age}`;
      console.log(h1);

      function tag() {
        /**
         * 参数1: 代表 模板字符串,但不包括 ${name} ${age} 类型是个数组
         * 参数2: ${name}
         * 参数3: ${age}
         * **/
        console.log(arguments);

        // 该函数 return 什么 实际的 h1 变量取到的就是什么
        return 'Hello';
      }

      /**
       * 由此可以联想到 react 中 styled-compoents 这个组件库的原理就是这样的
       * 
       *    const Button = styled.button`
                color: grey;
            `;
            最终会返回一个 react 组件赋值给 Button
            
       * **/
    </script>
  </body>
</html>
